<template>
  <a-modal
    v-model:open="open"
    :width="850"
    :height="600"
    title="请勾选单个模版，推送平台账号"
    @ok="submit"
    :footer="null"
  >
    <div class="template-list">
      <div
        style="
          display: flex;
          justify-content: center;
          border-bottom: 1px #f0f0f0 solid;
          padding-bottom: 10px;
        "
      >
        <div style="width: 160px"></div>
        <div style="width: 160px">名称</div>
        <div style="width: 160px; text-align: right">报价模式</div>
        <div
          style="width: 160px; text-align: right; color: #1890ff; position: relative; left: 38px"
        >
          操作
        </div>
      </div>
      <ul class="content">
        <li
          v-for="(item, index) in listCopy"
          :key="index"
          class="item"
          :class="{ active: item.status }"
        >
          <div class="checkbox">
            <a-checkbox
              v-model:checked="item.status"
              id=""
              @change="checkboxChange(item)"
            ></a-checkbox>
          </div>

          <div style="display: flex; align-items: center">
            <a-tooltip placement="top">
              <template #title>
                <span>{{ item.name }}</span>
              </template>
              <div class="hiddenText">{{ item.name }}</div>
            </a-tooltip>
          </div>

          <!-- <div class="id">{{ item.id }}</div> -->
          <div class="type">{{ item.type == 1 ? '简易报价模式' : '专业报价模式' }}</div>
          <a @click="del(item)">删除</a>
        </li>
      </ul>

      <!-- 推送 -->
      <div style="margin: 5px 0">
        <span>选择推送微信账号：</span>
        <a-select
          style="width: 150px"
          placeholder="请选择分组"
          v-model:value="groupId"
          @change="selectGroup"
        >
          <a-select-option v-for="(item, index) in groupList" :key="index" :value="item.id">
            {{ item.groupName }}
          </a-select-option>
        </a-select>
        <a-select
          style="width: 50%; margin-left: 5px"
          placeholder="请选择"
          mode="multiple"
          v-model:value="sendRobat"
          @change="selectSendRobat"
          allowClear
          show-search
          :options="optionList"
          :filter-option="filterOption"
        >
          <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <a-button type="primary" style="margin: 0 10px" @click="sendOk">确认推送</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as tempalteApi from '@/api/template.ts'
import { message } from 'ant-design-vue'
import * as preQuotationApi from '@/api/preQuotation'
import * as accountApi from '@/api/account'

let open = ref<boolean>(false)

const showModal = () => {
  open.value = true

  getRobatList()
  getGroupList()
  getList()
}

defineExpose({
  showModal,
})

let listCopy = ref([])

// 模板列表
const getList = async () => {
  try {
    let { state, data, message: msg } = await tempalteApi.getSimpleTemplateList({ type: 2 })
    if (state === 200) {
      listCopy.value = data.map(item => {
        item.isRemarkShow = false
        item.status = false

        return item
      })

      console.log('getList-listCopy=', listCopy.value)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求发送失败1~')
  }
}

let okTemplateId = ref('')
const checkboxChange = item => {
  console.log('item', item)

  if (item.status) {
    okTemplateId.value = item.id
  } else {
    okTemplateId.value = ''
  }
}

const submit = () => {
  console.log('submit')
}

// 拉取机器人列表
let okRobat = ref<string>()
const robatList = ref<SelectProps['options']>([])

interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
const getRobatList = async () => {
  const params = {
    currentPage: 1,
    pageSize: 100,
  }
  try {
    let { state, data, message: msg } = await accountApi.getList(params)
    if (state === 200) {
      robatList.value = data.list
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })

      optionsArr.value = data.list
      if (data.list.length == 0) {
        message.error('闲鱼：无平台账号，请先添加平台账号')
      } else if (data.list.length > 0) {
        // selectRobat(data.list[0].id)
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

import type { SelectProps } from 'ant-design-vue'
// 推送
const groupList = ref<SelectProps['options']>([])
const groupId = ref<string>()
const optionsArr = ref<SelectProps['options']>([])
const getGroupList = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getWechatRobotGroupList()
    if (state === 200) {
      groupList.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectGroup = (selectValue: any) => {
  groupId.value = selectValue as string
  sendRobat.value = optionsArr
    .value!.filter(item => item.groupId == groupId.value)
    .map(item => item.id)
}

// 推送配置
let sendRobat = ref<Array<string>>()
const selectSendRobat = (selectValue: any) => {
  sendRobat.value = selectValue
}
const pushRobot = async () => {
  // console.log('okRobat=', okRobat.value)
  // console.log('sendRobat=', sendRobat.value)
  if (!sendRobat.value.length) {
    message.warning('请至少选择一个机器人~')

    return
  }
  if (!okTemplateId.value) {
    message.warning('请选择模板再推送~')

    return
  }
  let params = {
    acceptRobotIds: sendRobat.value,
    channel: 1,
    groupId: okTemplateId.value,
  }
  try {
    const { state, message: msg } = await tempalteApi.pushTemplateZyRule(params)
    if (state === 200) {
      message.success('操作成功')
      open.value = false
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const sendOk = () => pushRobot()

// select搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}
</script>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
  // background-color: aqua;
}
.template-list {
  .content {
    text-align: center;
    position: relative;
    left: -20px;

    // width: 100%;
    li:nth-child(n + 2) {
      margin-top: 5px;
    }

    li {
      list-style: none;
      /* 简写形式 */
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      // background-color: blue;
      background: rgba(255, 255, 255, alpha);
      padding: 20px 20px 20px 0;
      box-sizing: border-box;
    }

    .active {
      background: rgba(186, 224, 255, 0.2);
    }
  }

  .btn {
    margin-top: 20px;
    text-align: center;
    padding: 0 80px;
  }
}
</style>
